<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../../js库/mock.js"></script>
    <script src="../../js库/vue.js"></script>
    <title>盒子模型</title>
    <style>
        /* 
            页面布局三大核心: 盒子模型 浮动 定位
            网页布局过程:
               1 先准备好相关网页元素 网页元素基本都是盒子box
               2 利用css设置好盒子的样式 然后摆放到相应位置(浮动 定位)
                3 往盒子里面装内容
            网页核心:利用css摆盒子
        */
        /* 
        盒子模型的组成  几乎所有标签都是盒子
            把html页面的布局元素看作一个矩形盒子 也就是一个盛装内容的容器
            css盒子模型的本质是个盒子 封装周围的html元素 包括 : 边框border 外边距margin 内边距padding 实际内容content
          
            外边距margin  控制盒子和盒子之间的距离
                margin-left
                margin-right
                margin-top
                margin-bottom
            复合写法
                2px 上下左右都为2px
                2  3 上下2 左右3
                2 3 4 上2 左右3 下4
                2 3 4 5 按顺时针
            margin典型应用 ：块级盒子水平居中
                必须条件 
                    块级盒子指定宽度width
                    左右外边距设置为auto
            行内元素或行内块元素水平居中 给其父元素(块元素)添加text-align:center即可
                把行内元素或行内块元素看作文字
            
            嵌套元素垂直外边距的塌陷
                对于两个嵌套关系的块元素 父子元素都有上边距时 此时父元素会塌陷较大的外边距
                    解决办法 
                        为父元素定义上边框
                        为父元素定义内边距
                        为父元素添加overflow:hidden
            清除内外边距
                有些元素自带内外边距 如body自带margin dib自带margin ul自带padding margin
                 * {
                    padding: 0;
                    margin: 0;
                }
                行内元素尽量只设置左右内外边距 不要设置上下内外边距 块和行内块可以
            */
        div.a {
            width: 300px;
            height: 300px;
            background-color: pink;
            border: solid ;
           margin-bottom: 20px;
        }
        div.b {
            width: 400px;
            height: 100px;
            background-color: green;
            border: solid ;
            /* 如果外边距位置冲突 则取最大值 */
            margin-top: 20px;
             }
             div.hea {
                background-color: pink;
                height: 50px;
                text-align: center;
                line-height: 50px;
                width: 500px;
                margin: 0 auto;
             }
            a.aa {
                display:block;
                width: 50px;
                background-color: yellowgreen;
                margin: 0 auto;
            } 
            a.cc {
               
                background-color: green;
            }
            div.cc {
                text-align: center;
            }
         div.father {
            width: 500px;
            height: 250px;
            background-color: pink;
            /* border: 1px solid transparent; */
            /* padding: 1px; */
            overflow: hidden;
                /* margin-top: 50px; */
         }
         div.son {
            width: 400px;
            height: 100px;
            background-color: green;
           /* margin-left: auto;margin-right: auto; */
          margin-top: 80px;
         }
         div.c1 {
            background-color: pink;
         }
         * {
            padding: 0;
            margin: 0;
         }
         span {
            background-color: green;
            margin: 20px;
         }
    </style>
</head>

<body>
    <div id="root">

        <h1>清除内外边距</h1>
        <div class="c1">
            <ul>
                <li>小红</li>
            </ul>
        </div>
        <span>小米</span>
        <span>苹果</span>
        <h1>清除内外边距</h1>
        <h1>外边距合并</h1>
      <div class="father">
        <div class="son"></div>
      </div>
        <h1>外边距合并</h1>
       <h1>margin</h1>
       <!-- <div class="a">a盒子</div>
       <div class="b">b盒子</div> -->
       <!-- <div class="hea">水平居中</div>
       <a class="aa" href="#">你好</a> -->
       <div class="cc">
     <a href="#" class="cc">小米</a>
     <a href="#" class="cc">小米</a>
     

    </div>
    </div>
</body>
<script>
    new Vue({
        el: '#root',
        data() {
            return {
            }
        },
    })
</script>

</html>